<template>
	<view class="my-promotion" :data-theme="theme" :class="theme" :style="globalColor.style">
		<!-- #ifdef H5 -->
			<HeadCustom title="我的推广" :isAppBtn="false" :isHome="false"></HeadCustom>
		<!-- #endif -->
		<!-- #ifdef MP -->
			<HeadCustom title="我的推广" :isAppBtn="false"></HeadCustom>
		<!-- #endif -->
		
		<u-tabs
			:lineColor="activeColor"
			:activeStyle="{
				color: activeColor
			}"
			:inactiveStyle="{
				color: 'inactiveColor'
			}"
			:list="userList"
			style="padding-left: 20rpx;"
			itemStyle="height:88rpx"
			@click="changeItem"
		></u-tabs>
		<view class="list-box">
			<view class="user-box fboxRow Ycenter" v-for="(item, index) in detailList" :key="index" @click="goPage(item)">
				<image class="img-tx" :src="item.avatar" mode="aspectFill"></image>
				<view class="detail-box flex1">
					<view class="name font30 fboxRow Ycenter">
						<text>{{ item.realName }}</text>
						<image v-if="item.isAuth" class="img_sm" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/grid_view 2.png"></image>
					</view>
					<view class="fboxRow Xbetween">
						<view class="user-msg font26 font-ell1">
							<text style="margin-right: 20rpx;">{{ item.position }}</text>
							<text>{{ item.companyName }}</text>
						</view>
						<text class="time font26">{{ item.gmtCreate.split(' ')[0] }}</text>
					</view>
				</view>
			</view>
			<view class="space" style="height: 40rpx;" v-if="detailList.length == 0"></view>
			<u-loadmore fontSize="24rpx" v-if="isShow" :status="listConfig.loading" />
		</view>
	</view>
</template>

<script>
import { getRegisterConnectCount, getRegisterConnectMemberPage } from '@/api/h5.js';
import { utf8to16, base64decode } from '@/static/js/Base64.js';
import { getRequest } from '@/static/js/common.js';
export default {
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			isShow: false,
			listConfig: {
				loading: ''
			},
			detailList: [],
			selectType: 1,
			userList: [
				{
					name: '直引用户',
					value: 1,
					bracket: {
						value: 0
					}
				},
				{
					name: '裂变用户',
					value: 2,
					bracket: {
						value: 0
					}
				}
			],
			page: {
				size: 20,
				current: 1,
				total: 0
			},
			activeColor: '',
			inactiveColor: ''
		};
	},
	onLoad(option) {
		if (option.benwu) {
			let benwu = utf8to16(base64decode(option.benwu));
			const token = {
				access_token: getRequest(benwu, 'token'),
				statusBarHeight: getRequest(benwu, 'statusBarHeight')
			};
			getApp().globalData.statusBarHeight = token.statusBarHeight;
			uni.setStorageSync('bw_params', JSON.stringify(token));
		}
		this.getInit();
	},
	onReachBottom() {
		if (this.page.size * this.page.current < this.page.total) {
			this.listConfig.loading = 'loading';
			this.page.size += 10;
			this.getConnectMemberPage();
		} else {
			this.listConfig.loading = 'nomore';
		}
	},
	onPullDownRefresh() {
		this.page.size = 20;
		this.getInit();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	watch: {
		globalColor: {
			handler(newVal) {
				if (newVal) {
					this.activeColor = newVal['selectedFontColor'];
					this.inactiveColor = newVal['contentFontLightColor'];
				}
			},
			deep: true,
			immediate: true
		}
	},
	methods: {
		goPage(item) {
			this.$pageTo('/CardDetail', { id: item.memberId });
		},
		changeItem(data) {
			this.selectType = data.value;
			this.getInit();
		},
		getInit() {
			this.getConnectMemberPage();
			this.getConnectCount();
		},
		// 分页查询列表
		getConnectMemberPage() {
			getRegisterConnectMemberPage({ ...this.page, selectType: this.selectType }).then(res => {
				if (res.data) {
					this.detailList = res.data.list;
					this.page.total = res.data.total;
					this.isShow = true;
				}
			});
		},
		// 获取数量
		getConnectCount() {
			getRegisterConnectCount({}).then(res => {
				if (res.data) {
					this.userList.forEach(item => {
						if (item.value == 2) {
							item.bracket.value = res.data.indirectCount;
						} else {
							item.bracket.value = res.data.directCount;
						}
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
::v-deep .u-tabs__wrapper__nav__item {
	flex: 1;
}
::v-deep .u-tabs__wrapper__nav__item__text {
	font-size: 30rpx;
	font-weight: 500;
}
.my-promotion {
	height: 100vh;
	.list-box {
		padding: 0 40rpx 40rpx;
		.user-box {
			border-bottom: 1px solid var(--backgroundDivisionColor);
			padding: 40rpx 0;
			.img-tx {
				width: 88rpx;
				height: 88rpx;
				margin-right: 20rpx;
				border-radius: 8rpx;
			}
			.detail-box {
				.name {
					font-weight: 500;
					margin-bottom: 15rpx;
					line-height: 44rpx;
					.img_sm {
						width: 40rpx;
						height: 40rpx;
						margin-left: 20rpx;
					}
				}
				.user-msg {
					color: #6b707c;
				}
				.time {
					color: #6b707c;
					flex-shrink: 0;
				}
			}
		}
	}
}
</style>
